<template>
  <div class="img-silde">
    <div v-if="datas.list.length === 0" :style="{ height: datas.height + 'px' }">
      <img class="w100 h100" src="@/assets/images/empty-banner.png" />
    </div>
    <el-carousel v-else :interval="datas.duration" :height="datas.height + 'px'">
      <el-carousel-item v-for="item in datas.list" :key="item">
        <el-image class="w100 h100" :src="item.image" />
      </el-carousel-item>
    </el-carousel>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>
<script lang="ts" setup name="imgSlide">
import { toRefs } from "vue";
const props = defineProps({
  datas: {
    type: Object
  }
});
const { datas } = toRefs(props);
</script>
<style lang="scss" scoped>
.img-silde {
  background-color: #edac2f;
}
</style>
